<template>
	<view class="app">
		<u-navbar title="" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="" style="margin-top: 100rpx;">
			<view class="top" style="display: flex;background-color: white;border-radius: 18rpx;padding: 20rpx;">
				<view class="">
					<image :src="detail.icon" mode="" style="width: 86rpx;height: 86rpx"></image>
				</view>
				<view class="" style="margin-left: 20rpx;">
					<text style="font-weight: bold;font-size: .95rem;">{{detail.name}}\n</text>
					<text style="font-size: .85rem;color: #888;">{{detail.introduction}}</text>
				</view>
			</view>
			<view class="" style="margin: 20rpx 0;display: flex;align-items: flex-start">
				<text style="font-size: .95rem;">热门帖子：{{detail.newest_topic_title}}</text>
			</view>

			<u-tabs :list="list1" @click="click"></u-tabs>
			<view class="view-item" v-for="(item,index) in data" :key="index"
				style="background-color: white;padding: 20rpx;border-radius: 18rpx;margin: 20rpx 0;">
				<view class="" style="display: flex;">
					<image lazy-load :src="item.publisher.user_avatar.large" mode=""
						style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
					<view class="" style="margin-left: 20rpx;">
						<text style="font-size: .9rem;font-weight: bold;">{{item.publisher.screen_name}}\n</text>
						<text style="font-size: .85rem;color: #888;">{{item.published_date}}</text>
					</view>
				</view>
				<view class="" style="margin: 20rpx 0;">
					<text>{{item.title}}</text>
				</view>
				<view class=""
					style="display: flex;height: 190rpx;overflow: hidden;align-items: center;margin: 20rpx 0;"
					v-if="item.images.length!=0">
					<image v-for="(img,index) in item.images" lazy-load :src="img" mode="widthFix"
						@click="clickImg(item.images,index)" style="width: 200rpx;margin-right: 10rpx;"></image>
				</view>
				<view class="" style="font-size: .9rem;display: flex;align-items: center;justify-content: flex-end;">
					<image src="../../../static/img/评论.png" mode="" style="width: 30rpx;height: 30rpx;margin: 0 8rpx;">
					</image>
					<text>{{item.total_review}}</text>
					<text style="margin-left: 10rpx;"></text>
					<image src="../../../static/img/赞小.png" mode="" style="width: 30rpx;height: 30rpx;margin: 0 8rpx;">
					</image>
					<text>{{item.praise_num}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: Object,
				detail: Object,
				option: {
					size: 20,
					auto: true,
				},
				id: "",
				filter: "",
				order: "reviewed_date_desc",
				list1: [{
					name: "全部",
					filter: "",
					order: "reviewed_date_desc"
				}, {
					name: "精华",
					filter: "elite",
					order: "reviewed_date_desc"
				}, {
					name: "最新",
					order: "publish_date_desc",
					filter: ""
				}]
			}
		},
		onLoad() {
			let routes = getCurrentPages();
			this.id = routes[routes.length - 1].options.id
			this.getData()
		},
		methods: {
			rightClick() {
				uni.navigateBack()
			},
			clickImg(imgs, index) {
				uni.previewImage({
					urls: imgs,
					current: index
				})
			},
			getData() {
				this.data = []
				uni.request({
						url: "/v2/forum_topic_list",
						data: {
							order: this.order,
							size: 20,
							forum_id: this.id,
							filter: this.filter
						},
						success: (res) => {
							this.data = [...this.data, ...res.data.data.topics]
						},
					}),
					uni.request({
						url: "/v2/forum_detail?is_checkin=49&forum_id=" + this.id + "&mode=3&is_joined=49",
						success: (res) => {
							this.detail = res.data.data.forum_detail
						}
					})
			},
			click(item) {
				this.order = item.order
				this.filter = item.filter
				this.getData()
			}
		}
	}
</script>

<style lang="less">
	.app {
		background-color: var(--bgcolor);
		min-height: 100vh;
		padding: 20rpx;
	}

	.view-item {
		transition: all 0.2s;

		&:active {
			background-color: whitesmoke !important;
		}
	}
</style>